import React, { useEffect, useState } from 'react'
import { useHistory, useParams } from 'react-router-dom'
import { Toast, NavBar } from 'antd-mobile'
import * as api from './server'
import dayjs from './server/day'

const Topic = (props) => {
    //Route中component可以得到 props
    // console.log(props);//参数在props.location中
    // const {id}=props.match.params;//为什么没有内容？


    //动态路由 topic/:id不能得到结果，需要用hooks
    // const data=useParams();//动态路由配置的对象，可以解构
    const { id } = useParams();
    const history = useHistory();
    const [detail, setDetail] = useState({});

    useEffect(() => {

        //查看收藏列表
        api.getCollect('HL1115')
            .then(res => {
                console.log(res.data);
            })


        api.getTopic(id)
            .then(res => {
                // console.log(res)
                setDetail(res.data);
            })
    }, [])



    //收藏
    const collectTopic = () => {
        api.collectTopic({
            accesstoken: 'e73b268b-f5d2-4ff1-8fd9-3581b84962e2',
            topic_id: id
        })
            .then(res => {
                if (res.success) {
                    alert('收藏成功')
                }
            })
    }

    //取消收藏
    const delCollectTopic = () => {
        api.delCollection({
            accesstoken: 'e73b268b-f5d2-4ff1-8fd9-3581b84962e2',
            topic_id: id
        })
            .then(res => {
                if (res.success) {
                    alert('取消收藏成功')
                }
            })
    }

    return (
        <div>
            <NavBar onBack={history.goBack}>标题</NavBar>
            <h2>{detail.title}</h2>
            <h3 className="time">发布于{dayjs(detail.create_at).fromNow()}</h3>

            <button onClick={collectTopic}>收藏主题</button>
            <button onClick={delCollectTopic}>取消收藏</button>
            <div dangerouslySetInnerHTML={{ __html: detail.content }} ></div>
            {/*直接写 {content}  会有代码*/}
            {/* <div dangerouslySetInnerHTML={ {__html:props.loaction.state.content} } ></div> */}

        </div>
    )
}

export default Topic
